function isOnScreen(el) {
  const rect = el.getBoundingClientRect();
  const { top, left } = rect;
  let { innerHeight: topMax, innerWidth: leftMax } = window;
  let topMin = el.clientHeight;
  let leftMin = el.clientWidth;

  if (top >= -topMin && top <= topMax && left >= -leftMin && left <= leftMax) {
    const scrollParent = getScrollParent(el);
    if (scrollParent !== document.body) {
      return isOnScreen(scrollParent, offset);
    }

    return true;
  }

  return false;
}

function getScrollParent(el) {
  const style = getComputedStyle(el);
  const excludeStaticParent = style.position === "absolute";
  const overflowRegex = /(auto|scroll)/;

  let result;
  if (style.position !== "fixed") {
    for (let parent = el; (parent = parent.parentElement); ) {
      const { position, overflow, overflowX, overflowY } =
        getComputedStyle(parent);
      if (excludeStaticParent && position === "static") {
        continue;
      }
      if (overflowRegex.test(overflow + overflowY + overflowX)) {
        result = parent;
        break;
      }
    }
  }

  return result || document.body;
}

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  let last;
  let deferTimer;

  return function (...args) {
    const context = scope || this;

    const now = +new Date();
    if (last && now < last + threshhold) {
      clearTimeout(deferTimer);
      deferTimer = setTimeout(() => {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}
function onScrollEvent(fn) {
  window.addEventListener("scroll", fn, false);
  window.addEventListener("resize", fn, false);
}
function offScrollEvent(fn) {
  window.removeEventListener("scroll", fn);
  window.removeEventListener("resize", fn);
}

const offetYName = "data-max-offset-y";
const offetXName = "data-max-offset-x";

const setSliceMove = (
  parentEle,
  scrollAnimationHeight = 100,
  scrollTriggerHeight = 0
) => {
  const offetYName = "data-max-offset-y";
  const offetXName = "data-max-offset-x";
  const nodeList = [
    ...(parentEle?.querySelectorAll(`.animation-module[${offetYName}]`) || []),
    ...(parentEle?.querySelectorAll(`.animation-module[${offetXName}]`) || []),
  ];

  if (!nodeList.length) return;

  nodeList.forEach((el) => {
    let offsetY = 0;
    let offsetX = 0;
    // 支持正负值控制方向，默认正数向上、负数向下
    const maxOffsectY = +(el.getAttribute(offetYName) || "");
    const maxOffsectX = +(el.getAttribute(offetXName) || "");
    const scrollHeight = window.scrollY;
    if (scrollHeight > scrollTriggerHeight) {
      const effectScrollHeight = scrollHeight - scrollTriggerHeight;
      // 得到一个动画完成的比例
      const ratio =
        effectScrollHeight > scrollAnimationHeight
          ? 1
          : effectScrollHeight / scrollAnimationHeight;
      offsetY = +(ratio * maxOffsectY).toFixed(2) || 0;
      offsetX = +(ratio * maxOffsectX).toFixed(2) || 0;
    }
    el.style.transform = `translate3d(${-offsetX}px, ${-offsetY}px, 0px)`;
  });
};

window.onload = () => {
  const parent1 = document.querySelector(".header-slices-block");
  const handler = throttle(() => {
    setSliceMove(parent1, 100, 50);
  }, 100);
  onScrollEvent(handler);
};
